<template>
    <div class="hot">
        <h3>最新阅读</h3>
        <ul>
        <li v-for="(item,index) in infolist" :key="item">
            <span>{{index+1}}.</span>
            <span id="info">{{item}}</span>
            <div id="right"><span>1766次</span></div>
        </li>
    </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                infolist:[
                    "新型冠状病毒解析",
                    "转甚因科普中心",
                    "长生不老可能吗",
                    "世界边缘开拓指南",
                    "时间旅行真的不可能吗",
                    "爱因斯坦不得不说的故事",
                    "人为什么不能熬夜",
                    "多喝热水为什么那么正确",
                    "如何做一场成功的演讲",
                    "大学在美国才更有意义"
                ]
            }
        }
        }
</script>
<style scoped>
#info{
    margin-left:20px;

}
.hot{
    padding:0px;
    text-align: justify;
    text-indent:0;
    background-color:#fae7e780;
}
.hot h3{
    margin-block-end: -12px;
    padding:0px;
    height:40px;
    background-color:lightgray;
    text-align:center;
    line-height:40px;
}
#right
{
    color:darkgray;
    margin-top:-24px;
    text-align: right;
}
ul{
    display:block;
    padding:5px;
}
li{
    margin-top:-3px;
    padding:7px;
    list-style:none;
}
</style>
